<template>
  <slide-verify
    :style="{ width: '100%' }"
    class="slide-box"
    ref="block"
    :l="42"
    :r="20"
    :w="362"
    :h="140"
    :slider-text="text"
    :accuracy="10"
    @again="onAgain"
    @success="onSuccess"
    @fail="onFail"
    @refresh="onRefresh"
    :imgs="imgArr"
  ></slide-verify>
  <!-- <div>{{ msg }}</div> -->
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
// 局部注册组件，需要单独引用组件样式
// 只提供局部引用的方式，不再采用插件形式，方便按需加载，减少主包大小
import SlideVerify, { SlideVerifyInstance } from "vue3-slide-verify";
import "vue3-slide-verify/dist/style.css";
import { useSliderStore } from "@/store/slider";

export default defineComponent({
  components: { SlideVerify },

  setup() {
    const useSlider = useSliderStore();
    const text = ref("向右滑动");
    const ParAms = (key: string) => {
      useSlider.SliderParams(key);
      text.value = key;
      console.log(text.value);
    };
    // let text = useSlider.SliderParams;
    const block = ref<SlideVerifyInstance>();
    // 刷新
    const onAgain = () => {
      ParAms("检测到非人为操作的哦！ try again");

      block.value?.refresh();
      // console.log(text);
    };
    //拼图成功
    const onSuccess = (times: number) => {
      ParAms("拼图成功");
      // console.log(text);
    };
    //拼图失败，验证不通过
    const onFail = () => {
      ParAms("再试一次");
      // console.log(text);
    };
    //点击刷新
    const onRefresh = () => {
      ParAms("点击了刷新小图标");
      // console.log(text);
    };
    // 滑块验证本地图片
    const imgArr = [
      new URL("../assets/img/q1.webp", import.meta.url).href,
      new URL("../assets/img/q2.webp", import.meta.url).href,
      new URL("../assets/img/q3.jpg", import.meta.url).href,
      new URL("../assets/img/q4.webp", import.meta.url).href,
    ];
    return {
      block,
      imgArr,
      accuracy: 1,
      onAgain,
      onSuccess,
      onFail,
      onRefresh,
      text,
    };
  },
});
</script>
<style lang="less" scoped>
.silde_box {
  margin: 0 auto;
}
</style>
